<template>
  <div>
      <div class="login-img">
          <img src="~assets/img/logo.png" alt="">
      </div>
      <form action="" @submit.prevent="loginClick">
          用户名：<input type="text" v-model.trim="usrInfo.usrname" placeholder="请输入用户名"><br>
          账&nbsp;&nbsp;&nbsp;&nbsp;号：<input type="text" v-model.trim="usrInfo.usrnum" placeholder="请输入账号"><br>
          密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" v-model.trim="usrInfo.pass" placeholder="请输入密码"><br>
          <button>登录</button>
      </form>
  </div>
</template>

<script>
export default {
    name: 'login',
    data() {
        return {
            usrInfo: {
                usrname: '',
                usrnum: '',
                pass: ''
            }
        }
    },
    methods: {
        loginClick() {
            if(this.usrInfo.usrname == ''|| this.usrInfo.usrnum == ''|| this.usrInfo.pass == ''){
                // console.log(123)
                this.$toast.show('请输入账号密码',1000)
            }else{
                var islogin = true
                // console.log(JSON.stringify(this.usrInfo))
                //提交用户信息到vuex中
                // this.$store.commit('addusrInfo',this.usrInfo)
                this.$store.commit('setusrInfo', this.usrInfo)
                // console.log(this.$store.state.usrInfo)
                this.$store.commit('loginchecked',islogin)
                window.history.back()
            }
            
        }
    }
}
</script>

<style>
.login-img {
    /* margin: 50px auto; */
    margin-top: 50px;
    margin-left: 90px;
    
}
/* .login-img img {
    vertical-align: middle;
} */
form {

    width: 340px;
    height: 230px;
    background-color: #fff;
    box-shadow: 1px 1px 3px #c5c5c5;
    border-radius: 8px;
    margin-top: 30px;
    margin-left: 18px;
    /* margin: 50px auto 0; */
    text-align: center;
    padding-top: 20px;
}
input {
    margin-top: 12px;
    margin-bottom: 10px;
}
input::placeholder {
    color: #c5c5c5;
}
button {
    margin-top: 20px;
    width: 50%;
    height: 50px;
    border: none;
    background-color: lightskyblue;
    border-radius: 8px;
    color: #fff;
}
</style>